<template>
  <div class="page-wraper">
    <div class="page-wraper-body">
      <div class="page-wraper-title">面试邀请函</div>
      <div class="page-wraper-userbody">
        <div class="mt-24">尊敬的先生/女士：</div>
        <div class="mt-24 break-word">感谢您应聘<span class="bold">{{jobData.company_name}}</span>的<span class="bold">{{jobData.job_name}}</span>职位。经过对您简历的认真评估，我们诚挚地邀请您参加面试。</div>
        <div class="flex-row mt-12">
          <div class="bold">面试岗位:</div>
          <div class="ml-8">{{jobData.job_name}}</div>
        </div>
        <div class="flex-row mt-12">
          <div class="bold">截至日期:</div>
          <div class="ml-8">{{ jobData.endTime }}</div>
        </div>
        <div class="flex-row mt-12">
          <div class="bold">面试方式:</div>
          <div class="ml-8">线上AI面试</div>
        </div>
        <div class="flex-row mt-12">
          <div class="bold">面试时长:</div>
          <div class="ml-8">{{ jobData.countdown ? parseInt(jobData.countdown/60) : '--' }}分钟</div>
        </div>
        <div class="flex-row mt-24 align-items-center justify-center page-wraper-options">
          <div>
            <el-button type="danger" @click="handerject">拒绝</el-button>
          </div>
          <div class="ml-12">
            <el-button type="success" @click="handerreject">接受</el-button>
          </div>
        </div>
      </div> 
      <div>
        <el-divider></el-divider>
      </div>
      <div class="page-wraper-footer flex-row align-items-center space-between">
        <div class="page-wraper-qrcode">
          <pk-canvas :modelValue="linkPath" width="100" height="100">
            <div class="page-wraper-tippc">微信扫码，参加面试</div>
            <div class="page-wraper-tiph5">点击长按，参加面试</div>
          </pk-canvas>
        </div>
        <div class="flex-col align-items-end flex-end">
          <div class="mt-12">{{jobData.company_name}} 人力资源部</div>
          <div class="mt-12">{{ time }}</div>
        </div>
      </div>
    </div> 
    <login-component v-if="counterStore.isLoginShow" @onClose="setLogin" @confirm="confirm" :loginType="1"></login-component>
    <userinfo-component v-if="userShow" :profile="profile" @onClose="userShow=false" @confirm="updateConfirm"></userinfo-component>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserInfo, getBasicInfo, scheduleInterview } from '@/api/api'
import loginComponent from '@/components/login/login.vue'
import userinfoComponent from '@/components/userinfo/userinfo.vue'
import pkCanvas from '@/components/pkui/pkcanvas/pkcanvas.vue'
import { useSideStore } from '@/store/state'
import {getToken, setKeyItem} from '@/utils/auth'
import { getTimeYearStr } from '@/utils/utils'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const counterStore = useSideStore()
const userShow = ref(false)
const userInfoData = ref()
const loginShow = ref(false)
const jobData = ref({})
const time = ref()
const invitationId = ref('')
const profile = ref({})
const linkPath = ref("")
const getUserInfoItem = () => {
  getUserInfo().then(res => {
    if (res.code == 1000 ) {
      userInfoData.value = res.data
      setKeyItem("userInfo", JSON.stringify(res.data))
      if (!res.data.fullname) {
        userShow.value = true
      } else {
        userShow.value = false
      }
    }
  })
}

const handerject = () => {
  if (!getToken()) {
    setLoginShow()
    return
  }
  gotvInerview(0)
   
}


const gotvInerview = (is_accept) => {
  scheduleInterview({
    invitation_id: invitationId.value,
    is_accept: is_accept
  }).then(res => {
    router.push({
      path: '/myinterview'
    })
  })
}


const updateConfirm = () => {
  userShow.value = false
  getUserInfoItem()
}

const handerreject = () => {
  if (!getToken()) {
    setLoginShow()
    return
  }
  gotvInerview(1)
}

const confirm = (e) => {
  loginShow.value = false 
  profile.value = e.profile
  if (e?.complete == 1) {
    userShow.value = true
  }
  // getUserInfoItem()
}

const setLoginShow = () => {
  counterStore.SETLOGINSHOW(true)
}

const setLogin = () => {
  counterStore.SETLOGINSHOW(false)
}


const getDetail = () => {
  const { key } = route.query
  invitationId.value = key
  getBasicInfo({
    key: key
  }).then(res => {
    console.log('------------getDetail-------------', res)
    linkPath.value = `https://bolepin.bytesbay.cn/invitation?key=${key}&page=/pages/invitation/index`
    jobData.value = {
      ...res.data,
      endTime: getTimeYearStr((new Date().getTime() + res.data.delay_days * 86400000)/ 1000, 'time',)
    }
  })

}

onMounted(() => {
  getDetail()

  time.value = getTimeYearStr(new Date().getTime()/ 1000, 'date', ['年', '月', '日'])
})
</script>

<style lang="scss" scoped>
.page-wraper{
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  &-body{
    width: 650px;
    border:#ddd 1px solid;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
  }
  &-title{
    border-bottom: #ddd 1px solid;
    padding-top:20px;
    padding-bottom: 24px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  &-userbody{
    width: 500px;
    margin: 0 auto;
    word-break: break-all;
  }
  &-footer{
    width: 500px; 
    margin: 0 auto
  }
  &-tippc{
    display: block;
  }
  &-tiph5{
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .page-wraper{
    // background: #fff;
    &-body{
      width: auto;
      margin: 0 16px;
      // border:none!important;
    }
    &-userbody{
      width: 100%;
    }
    &-footer{
      width: 100%; 
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    &-tippc{
      display: none;
    }
    &-tiph5{
      display: block;
    }
    &-options{
      display: none;
    }
  }
}
</style>